﻿@using FTBS.Models.BLO
@model IEnumerable<FTBS.Models.Entities.Chair>
@{
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
    ViewBag.Title = "CreateTickets";
    //var scheduleId = int.Parse(this.Session["ScheduleId"].ToString().Trim());
    var scheduleId = (int)ViewBag.ScheduleId;
    TicketBLO ticketBLO = new TicketBLO();
}
<script>
    var pos2 = "";
    var listId = "";

    $(function () {
        loadSeat();
        addRowHandlers();
    });

    function createTickets(idOfSchedule) {
        var chairId = document.getElementById('getId').innerText;
        jQuery("#overlay").css('display', 'block'); // displaying the overlay
        jQuery("#popup").css('display', 'block'); // displaying the popup
        $.ajax({
            url: "/Ticket/SubmitCreatingTickets",
            type: "POST",
            data: { listId: chairId, scheduleId: idOfSchedule },
            success: function (response) {
                if (response == "CreateSuccessfull") {
                    window.location.href = "/Ticket/Index";
                } else if (response == "SessionTimeOut") {
                    window.location.href = "/Home/Announcement";
                } else {
                    alert("Thao tác thất bại, hãy thử lại!!!");
                }
            }
        });
    }

    function loadSeat() {
        var chairs = $(".seat_choose, .seatVip_choose, .seatCouple_choose");
        var pos = "";
        var chairId = "";
        var totalPrice = 0;
        var chairTypeR, chairType;
        for (var i = 0; i < chairs.length; i++) {
            //lay ra chuoi vi tri ghe
            pos = chairs[i].innerText + " " + pos;
            //lay ra chuoi id ghe
            chairId = chairs[i].children[0].innerText + " " + chairId;
        }
        //
        var posTxt = document.getElementById('picked');
        var chairIdTxt = document.getElementById('getId');
        //var priceTxt = document.getElementById('giaTien');
        posTxt.innerHTML = pos;
        pos2 = pos;
        chairIdTxt.innerHTML = chairId;
        listId = chairId;
        //priceTxt.innerHTML = totalPrice;

    }

    function registerOnSeatClicked(cell) {

        cell.click(function () {

            var a = cell.attr("class");
            if (a == "seat")
            { cell.toggleClass('seat_choose'); }
            if (a == "seat seat_choose")
            { cell.toggleClass('seat_choose'); }
            if (a == "seatVip")
            { cell.toggleClass('seatVip_choose'); }
            if (a == "seatVip seatVip_choose")
            { cell.toggleClass('seatVip_choose'); }
            if (a == "seatCouple")
            { cell.toggleClass('seatCouple_choose'); }
            if (a == "seatCouple seatCouple_choose")
            { cell.toggleClass('seatCouple_choose'); }

            var chairs = $(".seat_choose, .seatVip_choose, .seatCouple_choose");
            var pos = "";
            var chairId = "";
            var totalPrice = 0;
            var chairTypeR, chairType;
            for (var i = 0; i < chairs.length; i++) {
                //lay ra chuoi vi tri ghe
                pos = chairs[i].innerText + " " + pos;
                //lay ra chuoi id ghe
                chairId = chairs[i].children[0].innerText + " " + chairId;
            }
            //
            var posTxt = document.getElementById('picked');
            var chairIdTxt = document.getElementById('getId');
            //var priceTxt = document.getElementById('giaTien');
            posTxt.innerHTML = pos;
            pos2 = pos;
            chairIdTxt.innerHTML = chairId;
            listId = chairId;
            //priceTxt.innerHTML = totalPrice;
        });
    }
    //Xac dinh vi tri tung o
    function addRowHandlers() {
        var table = document.getElementById("desk");
        for (i = 0; i < table.rows.length; i++) {
            for (j = 0; j < table.rows[i].cells.length; j++) {
                var cell = $(table.rows[i].cells[j]);
                //chay ham khi click vao o
                registerOnSeatClicked(cell);
            }
        }
    }
    function checkAll() {
        var table = document.getElementById("desk");
        for (i = 0; i < table.rows.length; i++) {
            for (j = 0; j < table.rows[i].cells.length; j++) {
                var cell = $(table.rows[i].cells[j]);
                if (!cell.hasClass('seat_choose') && !cell.hasClass('seatVip_choose') && !cell.hasClass('seatCouple_choose')) {
                    if (cell.hasClass('seat'))
                    { cell.toggleClass('seat_choose'); }
                    if (cell.hasClass('seatVip'))
                    { cell.toggleClass('seatVip_choose'); }
                    if (cell.hasClass('seatCouple'))
                    { cell.toggleClass('seatCouple_choose'); }
                }
            }
        }
        var chairs = $(".seat_choose, .seatVip_choose, .seatCouple_choose");

        var pos = "";
        var chairId = "";
        var totalPrice = 0;
        var chairTypeR, chairType;
        for (var i = 0; i < chairs.length; i++) {
            //lay ra chuoi vi tri ghe
            pos = chairs[i].innerText + " " + pos;
            //lay ra chuoi id ghe
            chairId = chairs[i].children[0].innerText + " " + chairId;
        }
        //
        var posTxt = document.getElementById('picked');
        var chairIdTxt = document.getElementById('getId');
        //var priceTxt = document.getElementById('giaTien');
        posTxt.innerHTML = pos;
        pos2 = pos;
        chairIdTxt.innerHTML = chairId;
        listId = chairId;
        //priceTxt.innerHTML = totalPrice;
    }
    function uncheck() {
        var table = document.getElementById("desk");
        var intCell = 0;
        for (i = 0; i < table.rows.length; i++) {
            for (j = 0; j < table.rows[i].cells.length; j++) {
                var cell = $(table.rows[i].cells[j]);
                var a = cell.attr("class");
                if (a == "seat seat_choose")
                { cell.toggleClass('seat_choose'); }
                if (a == "seatVip seatVip_choose")
                { cell.toggleClass('seatVip_choose'); }
                if (a == "seatCouple seatCouple_choose")
                { cell.toggleClass('seatCouple_choose'); }

            }
        }
        var chairs = $(".seat_choose, .seatVip_choose, .seatCouple_choose");

        var pos = "";
        var chairId = "";
        var totalPrice = 0;
        var chairTypeR, chairType;
        for (var i = 0; i < chairs.length; i++) {
            //lay ra chuoi vi tri ghe
            pos = chairs[i].innerText + " " + pos;
            //lay ra chuoi id ghe
            chairId = chairs[i].children[0].innerText + " " + chairId;
        }
        //
        var posTxt = document.getElementById('picked');
        var chairIdTxt = document.getElementById('getId');
        //var priceTxt = document.getElementById('giaTien');
        posTxt.innerHTML = pos;
        pos2 = pos;
        chairIdTxt.innerHTML = chairId;
        listId = chairId;
        //priceTxt.innerHTML = totalPrice;
    }
</script>
<div style="width: 100%; text-align: center">
    <img src="~/Image/Icon/board.png" style="height: 60px; width: 80%" /><br />
</div>
<br/>
<div style="vertical-align: top; max-height: 1200px; display: inline-block; width: 100%; overflow-x: auto">

    <table id="desk" style="margin: auto; width: 100%">
        @for (var i = 0; i < (int)ViewBag.RoomHeight; i++)
        {
            var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
            <tr style="border-bottom: 1px solid rgba(13, 12, 12, 0.87)">
                @foreach (var item in Model)
                {
                    if (item.ChairPosition.Contains(str[i]))
                    {
                        if (item.IsDeleted == true)
                        {
@*<td class="" style="color: transparent; padding: 22px">
                                    <div class="chairId" style="display: none">
                                        @Html.DisplayFor(modelItem => item.ChairId)
                                    </div>
                                    <div class="chairType" style="display: none">
                                        @Html.DisplayFor(modelItem => item.ChairType.TypeName)
                                    </div>
                                </td>*@
                        }
                        else
                            if (ticketBLO.CheckCreatedTicket(scheduleId, @item.ChairId))
                            {
                                if (ticketBLO.GetTicketById(ticketBLO.GetTicketId(scheduleId, @item.ChairId)).Status)
                                {
                                    if (item.ChairType.TypeName == "Single")
                                    {
                                        <td class="seated" style="color: floralwhite; padding-bottom: 12px; padding-left: 8px; font-size: 12px; padding-top: 5px; padding-right: 12px; text-align: center">
                                            @Html.DisplayFor(modelItem => item.ChairPosition)
                                            <div class="chairId" style="display: none">
                                                @Html.DisplayFor(modelItem => item.ChairId)
                                            </div>
                                            <div class="chairType" style="display: none">
                                                @Html.DisplayFor(modelItem => item.ChairType.TypeName)
                                            </div>
                                        </td>
                                    }
                                    if (item.ChairType.TypeName == "Vip")
                                    {
                                        <td class="seatedVip" style="color: floralwhite; padding-bottom: 12px; padding-left: 8px; font-size: 12px; padding-top: 5px; padding-right: 12px; text-align: center">
                                            @Html.DisplayFor(modelItem => item.ChairPosition)
                                            <div class="chairId" style="display: none">
                                                @Html.DisplayFor(modelItem => item.ChairId)
                                            </div>
                                            <div class="chairType" style="display: none">
                                                @Html.DisplayFor(modelItem => item.ChairType.TypeName)
                                            </div>
                                        </td>
                                    }
                                    if (item.ChairType.TypeName == "Couple")
                                    {
                                        <td style="color: floralwhite; padding-bottom: 12px; padding-left: 8px; font-size: 12px; padding-top: 5px; padding-right: 17px; text-align: center" colspan="2">
                                            @Html.DisplayFor(modelItem => item.ChairPosition)
                                            <div class="chairId" style="display: none">
                                                @Html.DisplayFor(modelItem => item.ChairId)
                                            </div>
                                            <div class="chairType" style="display: none">
                                                @Html.DisplayFor(modelItem => item.ChairType.TypeName)
                                            </div>
                                        </td>
                                    }
                                }
                                else
                                {

                                    if (item.ChairType.TypeName == "Single")
                                    {
                                        <td class="seat seat_choose" style="color: floralwhite; padding-bottom: 12px; padding-left: 8px; font-size: 12px; padding-top: 5px; padding-right: 12px; text-align: center">
                                            @Html.DisplayFor(modelItem => item.ChairPosition)
                                            <div class="chairId" style="display: none">
                                                @Html.DisplayFor(modelItem => item.ChairId)
                                            </div>
                                            <div class="chairType" style="display: none">
                                                @Html.DisplayFor(modelItem => item.ChairType.TypeName)
                                            </div>
                                        </td>
                                    }
                                    if (item.ChairType.TypeName == "Vip")
                                    {
                                        <td class="seatVip seatVip_choose" style="color: floralwhite; padding-bottom: 12px; padding-left: 8px; font-size: 12px; padding-top: 5px; padding-right: 12px; text-align: center">
                                            @Html.DisplayFor(modelItem => item.ChairPosition)
                                            <div class="chairId" style="display: none">
                                                @Html.DisplayFor(modelItem => item.ChairId)
                                            </div>
                                            <div class="chairType" style="display: none">
                                                @Html.DisplayFor(modelItem => item.ChairType.TypeName)
                                            </div>
                                        </td>
                                    }
                                    if (item.ChairType.TypeName == "Couple")
                                    {
                                        <td class="seatCouple seatCouple_choose" style="color: floralwhite; padding-bottom: 12px; padding-left: 8px; font-size: 12px; padding-top: 5px; padding-right: 17px; text-align: center" colspan="2">
                                            @Html.DisplayFor(modelItem => item.ChairPosition)
                                            <div class="chairId" style="display: none">
                                                @Html.DisplayFor(modelItem => item.ChairId)
                                            </div>
                                            <div class="chairType" style="display: none">
                                                @Html.DisplayFor(modelItem => item.ChairType.TypeName)
                                            </div>
                                        </td>
                                    }
                                }
                            }
                            else
                            {
                                if (item.ChairType.TypeName == "Single")
                                {  
                                    <td class="seat" style="color: floralwhite; padding-bottom: 12px; padding-left: 8px; font-size: 12px; padding-top: 5px; padding-right: 12px; text-align: center">
                                        @Html.DisplayFor(modelItem => item.ChairPosition)
                                        <div class="chairId" style="display: none">
                                            @Html.DisplayFor(modelItem => item.ChairId)
                                        </div>
                                        <div class="chairType" style="display: none">
                                            @Html.DisplayFor(modelItem => item.ChairType.TypeName)
                                        </div>
                                    </td>    
                                }
                                if (item.ChairType.TypeName == "Vip")
                                {
                                    <td class="seatVip" style="color: floralwhite; padding-bottom: 12px; padding-left: 8px; font-size: 12px; padding-top: 5px; padding-right: 12px; text-align: center">
                                        @Html.DisplayFor(modelItem => item.ChairPosition)
                                        <div class="chairId" style="display: none">
                                            @Html.DisplayFor(modelItem => item.ChairId)
                                        </div>
                                        <div class="chairType" style="display: none">
                                            @Html.DisplayFor(modelItem => item.ChairType.TypeName)
                                        </div>
                                    </td> 
                                }
                                if (item.ChairType.TypeName == "Couple")
                                {
                                    <td class="seatCouple" style="color: floralwhite; padding-bottom: 12px; padding-left: 8px; font-size: 12px; padding-top: 5px; padding-right: 17px; text-align: center" colspan="2">
                                        @Html.DisplayFor(modelItem => item.ChairPosition)
                                        <div class="chairId" style="display: none">
                                            @Html.DisplayFor(modelItem => item.ChairId)
                                        </div>
                                        <div class="chairType" style="display: none">
                                            @Html.DisplayFor(modelItem => item.ChairType.TypeName)
                                        </div>
                                    </td> 
                                }
                            }

                    }
                }
            </tr>            
        }
    </table>
</div>
    <br/><br/>
<table align="center" style="max-width: 100%;width: 100%;font-weight: bold;background-color: rgba(117, 107, 231, 0.28)">
    <tr>
        @if (ticketBLO.CountBookedTicketsByScheduleId(scheduleId) > 0)
        {
            <td>
                <img src="~/Image/Icon/seated.png" style="width: auto" />Màu vé đã có khách hàng đặt
            </td>
        }
        <td>
            <img src="~/Image/Icon/seat_choose.png" style="width: auto" />Màu ghế đã được đánh dấu để tạo vé
        </td>
        <td>
            <img src="~/Image/Icon/seat.png" style="width: auto" />Ghế đơn
        </td>
        <td>
            <img src="~/Image/Icon/seatVip.png" style="width: auto" />Ghế vip
        </td>
        <td>
            <img src="~/Image/Icon/seatCouple.png" style="width: auto" />Ghế đôi
        </td>
        
    </tr>
</table>
<br/>
<div style="text-align: center; width: 100%">
    <a href="#" class="warning button"style="width: 155px" onclick="createTickets(@scheduleId)">Cập nhật vé</a> 
    <a href="#" class="info button" style="width: 155px" onclick="checkAll();">Đánh dấu tất cả</a>
    <a href="#" class="info button" style="width: 155px" onclick="uncheck();">Bỏ đánh dấu tất cả</a>
    <button class="button danger" style="width: 155px">
                        @Html.ActionLink("Quay Lại", "Index")
                    </button>
</div>

<div style="color: transparent; opacity: 0; height: 20px; overflow-y: auto">
    <div id="getId"></div>
    <div id="picked"></div>
</div>
<style>
    .metro .button.large, .metro button.large {
        font-size: 14.5px;
    }
</style>
<div id="wrapper">
    <div style="display: none;" id="overlay"></div>
    <div style="display: none;" id="popup">
        <img src="~/Image/Icon/loading.gif" />
        <div style="font-weight: bold">Đang xử lý thao tác ...</div>
    </div>
</div>
<style>
    body {
        padding: 0;
        margin: 0;
        font-family: arial;
    }

    #wrapper {
        width: 600px;
        margin: 10px auto;
        text-align: center;
    }

    #overlay {
        background: #000000;
        opacity: 0.5;
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 10000;
    }

    #popup {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 20px solid #DDDDDD;
        left: 37.5%;
        padding: 50px;
        position: fixed;
        text-align: center;
        top: 28%;
        width: 280px;
        z-index: 20000;
        -moz-border-radius: 30px 0;
    }
</style>
